<template>
    <!-- 一个大的div区域把他们都囊括进去 -->
    <div class="base_form">
        <!-- 这个下面有三个大部分 -->
        <!-- 首先是  标题栏  header -->
        <!-- 然后是  查询区域  query -->
        <!-- 最后是  数据区域   -->

        <!-- 标题区域 -->
        <div class="base_header">
            <div class="blue_column"></div>
            <div class="base_title">学生互评</div>
        </div>


        <!-- 查询区域 -->
        <div>
            <div class="">
                <el-input placeholder="请输入学号或姓名" v-model="numName" />
                <el-button @click="doQuery">查询</el-button>
            </div>
        </div>

        <!-- getMyAssessment -->
        <div>
            <div class="">
                <el-button @click="getMyAssessment()">查看我的被评价记录</el-button>
            </div>
        </div>



        <!-- 数据区域 -->
        <div>
            <!-- 表格区域 -->
            <el-table :data="assessmentList">
                <el-table-column prop="num" label="学号" sortable></el-table-column>
                <el-table-column prop="name" label="姓名"></el-table-column>
                <el-table-column prop="assessment" label="评语"></el-table-column>
                <el-table-column prop="morality" label="道德">
                    <template #default="props">
                        <el-rate v-model=props.row.morality  :colors="colors"></el-rate>
                    </template>
                </el-table-column>
                <el-table-column prop="talent" label="才华">
                    <template #default="props">
                        <el-rate v-model=props.row.talent  :colors="colors"></el-rate>
                    </template>
                </el-table-column>
                <el-table-column prop="whole" label="总体评价">
                    <template #default="props">
                        <el-rate v-model=props.row.whole  :colors="colors"></el-rate>
                    </template>
                </el-table-column>

                <!-- 操作 -->
                <el-table-column label="操作">
                    <!-- 用对话框实现 -->
                    <template v-slot="scope">
                        <!-- <el-button  @click="handleEdit(scope.row)">编辑</el-button> -->
                        <el-button  @click="edit(scope.row)">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>

  <!-- 用对话框实现评价别人 -->
  <dialog id="favDialog" onclose="close()"
        style="position: absolute; top: 300px; left: 300px; width: 300px; height: 310px">
        <!-- 标题 -->
        <div class="base_title">评价编辑对话框显示</div>
        <!-- 对话框的表格 -->
        <div class="dialog-div" style="margin-top: 5px;">
            <table>
                <tr>
                  <td colspan="1" style="text-align: right">学号</td>
                  <td colspan="1"><input v-model="editItem.num2" /></td>
                </tr>
                <tr>
                  <td colspan="1" style="text-align: right">姓名</td>
                  <td colspan="1"><input v-model="editItem.name2" /></td>
                </tr>
                <tr>
                  <td colspan="1" style="text-align: right">评语</td>
                  <td colspan="1"><input v-model="editItem.assessment" /></td>
                </tr>
                <tr>
                  <td colspan="1" style="text-align: right">道德</td>
                  <td colspan="1"><input v-model="editItem.morality" /></td>
                </tr>
                <tr>
                  <td colspan="1" style="text-align: right">才华</td>
                  <td colspan="1"><input v-model="editItem.talent" /></td>
                </tr>
                <tr>
                  <td colspan="1" style="text-align: right">整体</td>
                  <td colspan="1"><input v-model="editItem.whole" /></td>
                </tr>
                <tr>
                  <td colspan="2">
                    <button class="commButton" @click="confirm()">确认</button>
                    <button class="commButton" @click="close()" style="margin-right: 30px">取消</button>
                  </td>
                </tr>
            </table>
        </div>
    </dialog>
    


</template>


<script lang="ts">
// 先引入一些要用到的东西
import { defineComponent } from "vue";
import { studentAssessmentInit, assessmentSave, assessmentQuery, getMyAssessment, stuAssessmentQuery } from "~/services/teachingServ"
import { el } from 'element-plus/es/locale';
import { getStudentIntroduceData } from "~/services/infoServ";
import { StudentItem, AssessmentItem } from "~/models/general";
import { getDialog } from "~/tools/comMethod";
import { message, messageConform } from '~/tools/messageBox'
import router from "~/router";
import { get } from "http";

//定义组件
export default defineComponent({
    data: () => ({
        dialogVisible : false,
        //定义下面方法中要用到的属性
        assessmentList: [],  //scoretable中    as ScoreItem怎么用
        numName: '',
        colors: ['#FF9900'],
        num:null,
        name:null,
        form: {} as AssessmentItem,
        editForm:{} as AssessmentItem ,
        editItem: {} as AssessmentItem,
       
    }),


    computed: {},
    //生命周期函数/钩子
    created() {
        this.initialize();//initialize 定义在下面的该方法中
    },

    methods: {
        async initialize() {
            this.assessmentList = (await studentAssessmentInit()).data;
        },

        doQuery() {
            stuAssessmentQuery(this.numName).then((res) => {
            if (res.code === 0) {
            this.assessmentList = res.data;
            } else {
            message(this, res.msg)
            }
      });

        },

        getMyAssessment(){
            router.push({
                path: "/getMyAssessment",
            });
        },

    //     handleEdit(row:AssessmentItem) {
    //         console.log("被点击");
    //   // 复制被点击行的数据到editFormData
    //         this.editForm = { ...row };
    //         console.log(this.editForm);
    //         console.log("被复制");
    //         this.dialogVisible = true; // 显示对话框
    //         console.log(this.dialogVisible);
    //         console.log("设置为true");
    // },


    //     handleSave() {
    //     },

        //弹出对话框
        edit(item:AssessmentItem) {
            this.editItem = item;
            const dialog = document.getElementById("favDialog") as HTMLDialogElement;
            getDialog('favDialog').show()
        },

        //关闭对话框
        close() {
            const dialog = document.getElementById("favDialog") as HTMLDialogElement;
            dialog.close();
        },

        //保存对话框的数据
        async confirm() {
            this.close();
            const res = await assessmentSave(
                this.editItem.assessmentId,
                this.editItem.assessment,
                this.editItem.morality,
                this.editItem.talent,
                this.editItem.whole,
            );
            if (res.code == 0) {
                message(this, "保存成功");
                //this.query();
            } else {
                message(this, res.msg);
            }
        },
    }
})
</script>



<style></style>